import {Button, Form, Input, Modal} from 'antd';
import React, {useEffect} from 'react'
import SearchParam from "components/searchParam";
import TablePage, {DataType} from "components/tablePage";
import {useQuery} from "react-query";
import {useObjectState} from "utils";
import Buttons from "components/noBorderButton";
import NoBorderButton from "components/noBorderButton";
import {clearObject, initPageConfig, message, removeObject} from "utils/utils";
import {operatedType, rightBoxSubmit, typeObject} from "types";
import RightBox from "components/rightBox";
import {
    deleteGraciousness,
    detailGraciousness,
    getGraciousness,
    insertGraciousness,
    updateGraciousness
} from 'api/venue'

export default function Venue() {
    const [pageConfig, setPageConfig] = useObjectState(initPageConfig)
    const [pageValues, setPageValues] = useObjectState({
        total: 0,
        open: false,
        initRightValue: {},
        detailModal: false,
        detailMessage: '',
        onRightLoading: false
    })
    const [form] = Form.useForm();
    const {data, isLoading} = useQuery(['venueList', pageConfig], async () => {
        const {data: res} = await getGraciousness({...removeObject(pageConfig, ['title'])})
        setPageValues({total: Number(res.total)})
        return res.records
    })
    const onSubmit = (value: object) => {
        setPageConfig({...value, page: 1})
    }
    const pagination = {
        current: pageConfig.page,
        pageSize: pageConfig.pageSize,
        total: pageValues.total,
        onChange: (v: number, t: number) => {
            setPageConfig({
                page: v,
                pageSize: t
            })
        }
    }
    const onReset = () => {
        setPageConfig({...clearObject(pageConfig), ...initPageConfig})
    }
    const operated: operatedType = ({type, data}) => {
        if (type === 'edit') {
            detailGraciousness(data.id).then(res => {
                setPageValues({initRightValue: res.data, open: true})
            })
        } else {
            Modal.confirm({
                title: '确定删除吗',
                okText: '确认',
                cancelText: '取消',
                onOk() {
                    deleteGraciousness(data.id).then(res => {
                        setPageConfig(pageConfig)
                        message({
                            message: res?.data,
                            type: 'success'
                        })
                    })
                },
                onCancel() {
                    message({
                        message: '取消删除',
                        type: 'warning'
                    })
                }
            });
        }
    }

    const onRightSubmit: rightBoxSubmit = async (value) => {
        setPageValues({onRightLoading: true})
        const res = pageValues.initRightValue.hasOwnProperty('id') ? await updateGraciousness(Object.assign(pageValues.initRightValue, value)) : await insertGraciousness(value)
        setPageConfig(pageConfig)
        message({
            message: res?.data,
            type: 'success'
        })
        setPageValues({onRightLoading: false})
        onClose()
    }
    const onClose = () => {
        setPageValues({open: false, initRightValue: {}})
    };
    const detailClick = (data: typeObject) => {
        setPageValues({detailMessage: data.detail})
        changeDetailModal(true)
    }
    const changeDetailModal = (open: Boolean) => {setPageValues({detailModal: open})}
    useEffect(() => {
        if (form) form.resetFields();
    }, [form, pageValues.open]);
    const columns = [
        {
            title: '文化馆名称',
            dataIndex: 'title',
            ellipsis: false
        },
        {
            title: '文化馆主图',
            dataIndex: 'picture',
            dataType: 'img'
        },
        {
            title: '详细地址',
            dataIndex: 'address'
        },
        {
            title: '联系电话',
            dataIndex: 'tel'
        },
        {
            title: '开放时间',
            dataIndex: 'openTime'
        },
        {
            title: '文化馆介绍',
            dataIndex: 'detail',
            render: (_: any, record: DataType) => {
                return <Buttons onClick={() => detailClick(record)}>查看详情</Buttons>
            }
        },
        {
            title: '文化馆标签',
            dataIndex: 'tags'
        },
    ]
    return (
        <div className={'venue'}>
            <SearchParam onReset={onReset} onSubmit={onSubmit}>
                <Form.Item
                    label="文化馆名称"
                    name="title"
                >
                    <Input placeholder="请输入名称"/>
                </Form.Item>
            </SearchParam>
            <TablePage
                operated={operated}
                loading={isLoading}
                columns={columns}
                dataSource={data}
                pagination={pagination}
            >
                <NoBorderButton
                    onClick={() => {
                        setPageValues({open: true, initRightValue: {}})
                    }}
                    type={'primary'} icon={'xinzeng'}
                    padding={'0.5rem 2rem'}>
                    新增文化馆
                </NoBorderButton>
            </TablePage>
            <RightBox
                open={pageValues.open}
                title={pageValues.initRightValue.hasOwnProperty('id') ? '编辑文化馆' : '新增文化馆'}
                onClose={onClose}
                className={'rightBox7'}
                key={'venue'}
            >
                <Form
                    form={form}
                    initialValues={pageValues.initRightValue}
                    onFinish={onRightSubmit}
                    autoComplete="off"
                >
                    <Form.Item
                        name="title"
                        label={'文化馆名称'}
                        rules={[{required: true, message: '请输入名称'}]}
                    >
                        <Input placeholder="请输入名称"/>
                    </Form.Item>
                    <Form.Item
                        name="tel"
                        label={'联系电话'}
                        rules={[{required: true, message: '请输入联系电话'}]}
                    >
                        <Input placeholder="请输入联系电话"/>
                    </Form.Item>
                    <Form.Item
                        name="address"
                        label={'详细地址'}
                        rules={[{required: true, message: '请输入详细地址'}]}
                    >
                        <Input placeholder="请输入详细地址"/>
                    </Form.Item>
                    <Form.Item
                        name="openTime"
                        label={'开放时间'}
                        rules={[{required: true, message: '请输入开放时间'}]}
                    >
                        <Input placeholder="请输入开放时间"/>
                    </Form.Item>
                    <Form.Item
                        name="tags"
                        label={'添加标签'}
                        rules={[{required: true, message: '请输入添加标签'}]}
                    >
                        <Input placeholder="请输入添加标签"/>
                    </Form.Item>

                    <Form.Item>
                        <Button loading={pageValues.onRightLoading} type={'primary'} htmlType="submit"
                                className="login-form-button">提交</Button>
                    </Form.Item>
                </Form>
            </RightBox>
            <Modal
                title="文化馆介绍"
                open={pageValues.detailModal}
                onCancel={() => changeDetailModal(false)}
                closeIcon={null}
                footer={[<Button key="submit" type="primary" onClick={() => changeDetailModal(false)}>
                    确定
                </Button>]}
            >
                <div dangerouslySetInnerHTML={{__html: pageValues.detailMessage}}/>
            </Modal>
        </div>
    );
};


